<template>
  <div class="mainChart" id="chart">
  </div>
  <dv-decoration-1 style="width:70%;height:30px;position: absolute;bottom: 20px;right: 20px;z-index: 99999" />
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import 'echarts-gl';
import {onMounted} from "vue";
import api from "@/api";
import $bus from '@/utils/bus/index'
onMounted(() => {
  const mainChart =echarts.init(document.getElementById('chart') as HTMLElement)
  const option = {
    title:{
      text:'全球XXX流量数据态势',
      textStyle:{
        color:'#fff',
        fontSize:20,
      },
      top:10
    },
    series:[{
      type:'lines3D',
      name:'position',
      data:[],
      effect:{
        show:true
      },
      lineStyle:{
        color:'#fff'
      },
      silent:true
    }],
    globe: {
      baseTexture: require('@/assets/world.topo.bathy.200401.jpg'),
      heightTexture: require('@/assets/world.topo.bathy.200401.jpg'),
      displacementQuality:'low',
      displacementScale: 0.04,
      shading: 'realistic',
      environment:require('@/assets/starfield.jpg'),
      realisticMaterial: {
        roughness: 0.9
      },
      postEffect:{
        enable: true
      },
      light: {
        main: {
          intensity: 5,
          shadow: true
        },
        ambientCubemap: {
          // texture: require('@/assets/pisa.hdr'),
          diffuseIntensity: 0.2
        }
      }
    }
  }
  option && mainChart.setOption(option)
  $bus.homeBus.on('updateHome',() => {
    api.map.getMapPosition().then((data) => {
      const linesData = data.map((item) => {
        return {
          value:item.userName,
          coords:[item.position,[104,30]]
        }
      })
      mainChart.setOption({
        series:[{
          data:linesData
        }]
      })
    })
  })
})
</script>

<style scoped>
.mainChart{
  padding: 10px;
  height: calc(100% - 30px);
  width: calc(100% - 30px);
}
</style>